<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>国信安-教务系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<style>
			/* 移动端 */
			
			@media screen and (max-width: 768px) {
				.layui-layout-admin .layui-layout-left,
				.layui-layout-admin .layui-body,
				.layui-layout-admin .layui-footer {
					left: 0;
				}
				.layui-layout-admin .layui-side {
					left: -300px;
				}
			}
			/*.layui-table td{
   	 height: 100px;
    }*/
			
			.layui-table td img {
				width: 100%;
				height: 100%;
			}
			
			.layui-input {
				width: 175px;
			}
			
			.layui-unselect {
				width: 200px;
			}
		</style>

	</head>

	<body>

		<!--   search  多条件查询  表单-->
		<div class="layui-form" id="search-teacherForm" lay-filter="search-teacherForm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">编号:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="id">
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">名字:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="name">
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-inline">
						<select name="sex">
							<option value="">--请选择--</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<select name="sex" class="getCurr">
							<option value="请选择">--请选择--</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button type="submit" class="layui-btn" lay-submit="search-submit" lay-filter="search-filter" style="margin-left:108px;">
					      	<i class="layui-icon layui-icon-search"></i>查询</button>
					</div>
				</div>
			</div>
		</div>
		<!--批量删除 添加按钮-->
		<div class="teacher-btns">
			<button type="button" class="layui-btn layui-btn-teacher" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i>删除</button>
			<button type="button" class="layui-btn layui-btn-teacher" data-type="add"><i class="layui-icon layui-icon-addition"></i>添加</button>
		</div>
		<!--表格数据-->
		<table id="test-teacher" lay-filter="filter-teacher"></table>
		<!--表格内置工具栏-->
		<script type="text/html" id="table-rows-teacher">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="aaaa"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
		<!--表格的图片模板-->
		<script type="text/html" id="imgTpl">
			<img src="{{d.url}}" />
		</script>
		<!-- 编辑的表单  添加  修改-->
		<div class="layui-form" id="teacherForm" lay-filter="edit-teacherForm"  id="display_id" style="display: none;">
			<!--或者<form class="layui-form" action=""></form> -->
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">编号ID:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="id" readonly="">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">姓名:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="name">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-block">
						<select name="sex">
							<option>---请选择---</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">工作年限:</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="workage">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">生日日期:</label>
					<div class="layui-input-block">
						<input type="date" id="brithday" class="layui-input" name="brithday">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">电话号码:</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="tel">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">家庭住址:</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="address">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程:</label>
					<div class="layui-input-block">
						<!--内层-->
						<select name="courseId" class="getCurr">
							<option value="">--请选择--</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">状态:</label>
					<div class="layui-input-block">
						<!--内层-->
						<select name="state">
							<option value="">--请选择--</option>
							<option value="0">0</option>
							<option value="1">1</option>
						</select>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="teacherForm-submit" lay-filter="teacherForm-filter">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</div>
		<!--div  隐藏  点击编辑时打开-->
		<!--html   点击打开新的页面  然后进行编辑-->
	</body>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script>
		layui.use(['element', 'table', 'layer', 'form'], function() {
			var element = layui.element,
				form = layui.form,
				layer = layui.layer,
				table = layui.table;
				
				
			$.getJSON("json/curriculum.json", function(result){
				console.log(result);
				   $.each(result, function() {
				   		console.log(this);
				   		$(".getCurr").append("<option value='"+this.id+"'>"+this.name+"</option>" )
				   });
				   //刷新表单
				   form.render('select');
				});
			//表格加载数据:  JSON
			//表格的加载  ：ajax请求，然后渲染表格
			table.render({
				elem: '#test-teacher' //那个table  id的值
					,
				url: 'json/teacher.json' //  url后面 servlet | json
					,
				cols: [
					[ //解析json数据 表头
						{
							type: 'checkbox',
							fixed: 'left',
							width: 50,
						}, {
							field: 'id',
							width: 100,
							title: 'id',
							sort: true
						}, {
							field: 'name',
							title: '姓名',
							minWidth: 80
						}, {
							field: 'sex',
							title: '性别',
							width: 100	
						},{
							field: 'workage',
							title: '工作年限',
							width: 100
						},{
							field: 'brithday',
							title: '生日日期',
							width: 150
						},{
							field: 'tel',
							title: '电话号码',
							width: 150
						}, {
							field: 'address',
							title: '家庭住址',
							width: 150
						}, 
						{
							field: 'courseId',
							title: '所授课程id',
							width: 100
						}, {
							field: 'createTime',
							title: '创建时间',
							width: 150
						}, 
						 {
							field: 'updateTime',
							title: '更新时间',
							width: 150
						}, 
						 {
							field: 'state',
							title: '状态',
							width: 150
						}, 
						{
							title: '操作',
							width: 150,
							align: 'center',
							fixed: 'right',
							toolbar: '#table-rows-teacher'
						}
					]
				],
				page: true //是否开启分页
					,
				limit: 10 //每页显示的条数
					,
				limits: [5, 10, 20, 50, 100] // 选择分页的显示条数
					,
				height: 500,
				text: '对不起，加载出现异常,请刷新试试。'
			});
			/*表格工具的事件*/
			table.on('tool(filter-teacher)', function(obj) {
				console.log(obj); //当前对象
				console.log(obj.data); //当前行的数据
				//获取当前行的数据   rows数据
				var data = obj.data;
				console.log(obj.event); //当前点击事件的名称
				if(obj.event == "aaaa") {
					layer.confirm('真的删除这行数据么？', function(index) {
						//ajax请求后台servlet删除成功后
						//请求 后端删除
						//成功之后再更新表格 table.reload();
						////////////////
						obj.del(); //在表格内移除
						layer.close(index); //关闭提示窗口
						/////////////////
					});

					table.reload();
				} else {
					console.log("b编辑  打开一个新窗口 显示在当前窗口的前面");
					//data 放入form表单中  20字段
					//一个字段一个字段赋值
					form.val("edit-teacherForm", {
						"id":data.id,
						"name":data.name,
						"sex":data.sex,
						"workage":data.workage,
						"brithday":obj.data.brithday,
						"tel":data.tel,
						"address":data.address,
						"courseId":data.courseId,
						"state":data.state
					});
					$("#display_id").css("display","block");
					//  form 表单的name  名字要与 表格中的 field一直  名字要跟JSON一致
					form.val("edit-teacherForm", data);
					$(".teacherForm .layui-form-item:first").css("visibility", "inherit");
					layer.open({
						type: 1,
						title: '修改老师信息',
						content: $('#teacherForm'),
						maxmin: true,
						area: ['600px', '600px'],
						resize: false,
						yes: function(index, layero) {
							$("#teacherForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#teacherForm').css("display", "none");
							return true;
						}
					});
				}
			});

			//添加,批量删除按钮事件
			var active = {
				batchdel: function() {
					//所以表格中被选中的 数据
					console.log("batchdel");
					var checkData = table.checkStatus('test-teacher').data; //idTest 即为基础参数 id 对应的值
					if(checkData.length > 0) {
						//   所以 id  提取
						var arrId = "";
						$.each(checkData, function() {
							arrId += this.id + ",";
						});
						console.log(arrId.substr(0, arrId.length - 1)) //获取选中行的数据
						//请求后端删除数据  然后刷新表格
					} else {
						layer.alert('请选择至少一条数据', {icon: 2});
					}

				},
				add: function() {
					//清空 form中数据  防止上一次 输入的值还在里面
					// form.render(null, 'edit-teacherForm');
					form.val("edit-teacherForm", {
						"id": "",
						"name": "",
						"sex":"",
						"workage":"",
						"brithday":"",
						"tel":"",
						"address":"",
						"courseId":"",
						"state":""
					});
					$("#display_id").css("display","none");
					console.log($("#teacherForm .layui-form-item:first").html());
					$(".teacherForm .layui-form-item:first").css("visibility", "hidden");
					layer.open({
						type: 1,
						title: '添加老师信息',
						content: $('#teacherForm'),
						maxmin: true,
						area: ['550px', '700px'],
						resize: false,
						yes: function(index, layero) {
							$("#teacherForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#teacherForm').css("display", "none");
							return true;
						}
					});
				},
				upload: function() {
					console.log("批量上传");
				}
			};

			//批量删除 添加按钮 解析data-type的值,绑定对应的事件
			$('.layui-btn-teacher').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//多条件查询 form 表单的submit 绑定提交事件
			form.on('submit(search-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				//给表单然后进行 table 筛选
				table.reload('test-teacher', {
					url: 'json/teacher.json' //异步数据接口
						,
					where: data.field //设定异步数据接口的额外参数
					//,height: 300
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			//新增修改的 form 表单的submit 绑定提交事件
			form.on('submit(teacherForm-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				if(field.id == "") {
					//添加  ajax
					console.log("这是添加");
					/* $.post("stuAdd", data.field,
                      function(result){//200  -1
                           if(result.code==200){
                               alert("添加成功");
                              //location.reload();//刷新页面
                           }else{
                               alert("数据有误,添加失败");
                           }
                      });*/
				} else {
					//修改 ajax
					console.log("这是修改");
					/*	 $.post("stuUpd", data.field,
                      function(result){//200  -1
                           if(result.code==200){
                               alert("添加成功");
                              //location.reload();//刷新页面
                           }else{
                               alert("数据有误,添加失败");
                           }
                      });*/
				}
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

		});
	</script>

</html>